import React, {
    Component,
    PropTypes
} from 'react';

export default class Todo extends Component {

    render() {
        const {
            todo,
            onRemoveClick,
            onToggleClick
        } = this.props;

        return (
            <li className={'todo ' + (todo.completed ? 'completed' : '')}>
                <div className="view">
                    <input type="checkbox" className="toggle" onChange={(e)=>onToggleClick(e)} checked={todo.completed}/>
                    <label>{todo.text}</label>
                    <button className="destroy" onClick={(e)=>onRemoveClick(e)}></button>
                </div>
            </li>
        );
    }
}

Todo.propTypes = {
    onRemoveClick: PropTypes.func.isRequired,
    onToggleClick: PropTypes.func.isRequired,
    todo: PropTypes.shape({
        todoId: PropTypes.string.isRequired,
        text: PropTypes.string.isRequired,
        completed: PropTypes.bool.isRequired
    }).isRequired
}